<template>
  <div class="bg-white flex flex-col">
    <div
      v-if="showType === 'full'"
      class="flex justify-between items-center mx-13px py-10px border-b border-solid border-neutral-100"
    >
      <Button
        @click="_changeMonth('reduce')"
        icon="arrow-left"
        class="!p-6px !h-auto !border-none"
      />
      <span class="current-date">{{ _getCurrentDate() }}</span>
      <Button
        @click="_changeMonth('plus')"
        icon="arrow"
        class="!p-6px !h-auto !border-none"
      />
    </div>
    <Calendar
      ref="calendar"
      class="calendar"
      v-bind="$attrs"
      v-on="$listeners"
      :show-mark="false"
      :show-title="false"
      :show-subtitle="false"
      :poppable="false"
      :show-confirm="false"
      :row-height="rowHeight"
      :formatter="_formatter"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="_onConfirm"
      :default-date="currentValue"
      :allow-same-day="allowSame"
    />
    <div
      v-if="showBottomArrow"
      class="flex items-center justify-center pb-10px pt-9px"
    >
      <Icon
        :class="showType === 'mini' ? '' : 'rotate-180 transform'"
        :name="arrowDown"
        :size="12"
        @click="showTypToggle"
      />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { Calendar, Icon, Button } from "vant";
import arrowDown from "@/assets/icon/arrow-down.png";
export default {
  components: {
    Calendar,
    Icon,
    Button,
  },
  props: {
    visibleType: {
      type: String,
      default: "mini",
      validator: (val) => {
        return ["mini", "full"].includes(val);
      },
    },
    value: {
      type: [String, Array],
      required: true,
    },
    valueFormat: {
      type: String,
      default: "YYYY-MM-DD",
    },
    rowHeight: {
      type: Number,
      default: 26,
    },
    formatter: {
      type: Function,
    },
    showBottomArrow: {
      type: Boolean,
      default: true,
    },
    allowSame: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      arrowDown,
      currentDate: null,
    };
  },
  computed: {
    // 可选最小日期
    minDate() {
      return moment(this.currentDate).startOf("month").toDate();
    },
    // 可选最大日期
    maxDate() {
      return moment(this.currentDate).endOf("month").toDate();
    },
    // 上周日
    weekStart() {
      return moment(this.currentDate).weekday(-1).valueOf();
    },
    // 本周六时间
    weekEnd() {
      return moment(this.currentDate).weekday(7).valueOf();
    },
    // 显示类型
    showType: {
      get() {
        return this.visibleType;
      },
      set(val) {
        this.$emit("update:visibleType", val);
      },
    },
    // 当前时间value
    currentValue: {
      get() {
        if (Array.isArray(this.value)) {
          const [start, end] = this.value;
          if (start && end) {
            return [moment(start).toDate(), moment(end).toDate()];
          }
          return [];
        } else {
          return this.value ? moment(this.value).toDate() : moment().toDate();
        }
      },
      set(val) {
        if (Array.isArray(val)) {
          const [start, end] = val;
          this.$emit("input", [
            moment(start).format(this.valueFormat),
            moment(end).format(this.valueFormat),
          ]);
        } else {
          this.$emit("input", moment(val).format(this.valueFormat));
        }
      },
    },
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this._initCurrentDate();
      },
    },
  },
  methods: {
    /**
     * 初始化当前时间
     */
    _initCurrentDate() {
      if (Array.isArray(this.value)) {
        this.currentDate = moment(this.value[0]).toDate();
      } else {
        this.currentDate = moment(this.value).toDate();
      }
    },
    // 格式化当前时间
    _getCurrentDate() {
      return moment(this.currentDate).format("YYYY年MM月");
    },
    // 日期选择
    _onConfirm(val) {
      this.currentValue = val;
    },
    /**
     * 加减月份
     */
    _changeMonth(type) {
      if (type === "reduce") {
        this.currentDate = moment(this.currentDate)
          .subtract(1, "months")
          .toDate();
      }
      if (type === "plus") {
        this.currentDate = moment(this.currentDate).add(1, "months").toDate();
      }
      this.$emit("month-change", this.currentDate);
    },
    _formatter(day) {
      const dayTime = moment(day.date).valueOf();
      if (this.formatter) {
        day = this.formatter(day);
      }
      if (dayTime > this.weekStart && dayTime < this.weekEnd) {
        // day.className = day.className;
      } else {
        day.className =
          this.showType === "mini" ? day.className + " !hidden" : day.className;
      }
      if (day.type === "start") {
        day.bottomInfo = "";
      } else if (day.type === "end") {
        day.bottomInfo = "";
      } else {
        day.bottomInfo = "";
      }
      return day;
    },
    /**
     * 展开收起时间
     */
    showTypToggle() {
      this.showType = this.showType === "mini" ? "full" : "mini";
      this.$emit("show-up-date", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.current-date {
  font-size: 14px;
  font-family: Helvetica;
  color: #1d2129;
  font-weight: 600;
}
.calendar {
  ::v-deep {
    .van-calendar__header {
      @apply shadow-none;
    }
    .van-calendar__body {
      .van-calendar__month-title {
        @apply hidden;
      }
    }
    .van-calendar__footer {
      @apply pb-0 hidden;
    }
    .van-calendar__days {
      .van-calendar__day {
        @apply my-2px;
        &.has-todo {
          &::after {
            content: "";
            width: 4px;
            height: 4px;
            background-color: #f55f4e;
            position: absolute;
            bottom: -2px;
            @apply rounded-1;
          }
        }
        // &.van-calendar__day--end,
        // &.van-calendar__day--start {
        //   @apply bg-white;
        //   background-color: rgba(29, 111, 233, 0.1);
        //   position: relative;
        //   z-index: 6;
        //   &:after {
        //     position: absolute;
        //     top: 0;
        //     right: 0;
        //     bottom: 0;
        //     left: 0;
        //     margin: auto;
        //     width: 22px;
        //     height: 22px;
        //     color: #fff;
        //     background: #1d6fe9;
        //     border-radius: 50%;
        //     content: " ";
        //     z-index: -1;
        //   }
        // }
        .van-calendar__selected-day {
          @apply rounded-1/1;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
